<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>custom lable</title>
    <link rel="stylesheet" href="../css/reset.css"/>
    <link rel="stylesheet" href="../css/common.css"/>
    <script src="../js/angular-1.4.6.min.js"></script>
    <script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
    <style>
        .banner{background-position: center;background-size: cover;display: table;}
        .banner div{height: 430px;background-color: rgba(255, 255, 255, 0.6);display: table-cell;vertical-align: middle;}
        .banner div p{width: 1200px;margin: 0 auto;}
        .banner div .b-title{font-size: 42px;}
        .banner div .b-word{color: #666;margin-top: 25px;font-size: 18px;}
        .content{}
        .content .title{padding: 40px 0;}
        .content .title span{display: inline-block;font-weight: bold;border-bottom: 1px solid #c8c8c8;padding-bottom: 5px;letter-spacing: 3px;font-size: 26px;}
        .content .c-title{font-size: 16px;color: #666;text-align: justify;}

        .img-group{margin-top: 40px;}
        .img-group .img{background-size: cover;background-position: center;}

        .modal{display: none;position: fixed;left: 0;top: 0;width: 100%;height: 100%;z-index: 9999;background-color: rgba(0, 0, 0, 0.50);}
        .modal .modal-box{position: absolute;left: 20%;top: 10%;right: 20%;bottom: 10%;background-size: contain;
            background-position: center;background-repeat: no-repeat;}
        .modal .close{position: absolute;top: 0;right: -50px;cursor: pointer;}
        .modal .close img{width: 30px;}
        .modal .prev,.modal .next{height: 40px;position: absolute;top: 50%;margin: -20px;cursor: pointer;}
        .modal .prev{left: -40px;}
        .modal .next{right: -40px;}
    </style>
</head>
<body ng-app="">
<!--公共头部-->
<div ng-include="'../html/header.html'"></div>
<div class="banner container-fluid" style="background-image: url('../img/vimostsports（FAQS-）伸展页_02.jpg')">
    <div class="container text-center">
        <p class="b-title text-uppercase bold">custom lable</p>
        <p class="b-word text-uppercase bold">USE THE FORM BELOW TO DIRECT YOUR QUERY STRAIGHT TO THE APPROPRIATE DEPARRTMENT. WE AIM TO GET BACK TO YOU VERY QUICKLY</p>
    </div>
</div>
<div class="mid-title container-fluid b-red text-center fs-14 white">ORDER NOW WITH FAST TRACK FOR DELIVERY BY Thursday 9th. STANDARD UK TURNAROUND – APPROX 6 to 8 WORKING DAYS<img src="../img/vimostsports_36.jpg"></div>
<div class="bread container-fluid">
    <div class="container clear">
        <div class="fl path">
            <p class="fs-18"><em>You are here:&nbsp;</em><a href="" class="text-capitalize">Home</a>&nbsp;>&nbsp;<span class="bold red text-capitalize">privacy policy</span></p>
        </div>
        <div class="fr">
            <div class="btn b-red white fs-14 bold">JUMP TO<img src="../img/vimostsports（About-Us-）_03.jpg" alt=""/></div>
            <ul class="list fs-14 text-capitalize">
                <li>
                    <a href="">about us</a>
                </li>
                <li>
                    <a href="">gallery</a>
                </li>
                <li>
                    <a href="">sublimation</a>
                </li>
                <li>
                    <a href="">how to order</a>
                </li>
                <li>
                    <a href="">order process</a>
                </li>
                <li>
                    <a href="">fabric guide</a>
                </li>
                <li>
                    <a href="">blog</a>
                </li>
                <li>
                    <a href="">FAQS</a>
                </li>
                <li>
                    <a href="">customer reviews</a>
                </li>
                <li>
                    <a href="">contact us</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="content container clear fs-16">
    <div class="title text-center">
        <span>custom lable</span>
    </div>
    <p class="c-title">The working process of garment design, color, making, dyeing, cotton, viscose cloth paste,Cut, cut the shoulder strap, do the shoulder straps, in the bowl of the combination, the bowl cover line, sponge, inside and outside the bowlHe,Upper ridge heart,Lace and upper ridge,Upper ridge heart and bowl combination,Fixed lace and bowl,The center seam, the center seam cover line and ridge with the heart, heart and spinal bowl combination.</p>
    <div class="img-group" data-slide="0">
        <div class="top">
            <div class="left fl clear" style="width: 300px;">
                <div class="fl img" style="width: 300px;height: 225px;background-image: url('../img/vimostsports（Custom-Lable）_03.jpg')"></div>
                <div class="fl img" style="width: 147px;height: 185px;background-image: url('../img/vimostsports（Custom-Lable）_08.jpg')"></div>
                <div class="fl img" style="width: 153px;height: 185px;background-image: url('../img/vimostsports（Custom-Lable）_09.jpg')"></div>
            </div>
            <div class="center fl img" style="width: 460px;height: 410px;background-image: url('../img/vimostsports（Custom-Lable）_04.jpg')"></div>
            <div class="right fl clear" style="width: 440px;">
                <div class="fl img" style="width: 220px;height: 255px;background-image: url('../img/vimostsports（Custom-Lable）_05.jpg')"></div>
                <div class="fl img" style="width: 220px;height: 255px;background-image: url('../img/vimostsports（Custom-Lable）_06.jpg')"></div>
                <div class="fl img" style="width: 440px;height: 155px;background-image: url('../img/vimostsports（Custom-Lable）_10.jpg')"></div>
            </div>
        </div>
        <div class="bottom clear">
            <div class="fl img" style="width: 564px;height: 255px;background-image: url('../img/vimostsports（Custom-Lable）_11.jpg')"></div>
            <div class="fl img" style="width: 331px;height: 255px;background-image: url('../img/vimostsports（Custom-Lable）_12.jpg')"></div>
            <div class="fl img" style="width: 305px;height: 255px;background-image: url('../img/vimostsports（Custom-Lable）_13.jpg')"></div>
        </div>
    </div>
</div>
<div class="modal">
    <div class="modal-box">
        <div class="close"><img src="../img/vimostsports（Custom-Lable）-tantianniu_03.png" alt=""/></div>
        <div class="prev"><img src="../img/vimostsports（Custom-Lable）-tantu2_07.png" alt=""/></div>
        <div class="next"><img src="../img/vimostsports（Custom-Lable）-tantu3_09.png" alt=""/></div>
    </div>
</div>
<!--公共底部-->
<div ng-include="'../html/footer.html'"></div>
</body>
<script>
    var slide = {
        index: 0,
        arr: [],
        init:function(){
            var len = $('.img-group .img').length;
            for(var i=0;i<len;i++){
                var img = ($('.img-group .img').eq(i).css('background-image'));
                slide.arr.push(img);
            }
            this.bind();
        },
        bind:function(){
            $('.img-group').find('.img').on('click',function(){
                slide.index = parseInt($(this).index('.img'));
                $('.modal-box').css('background-image',slide.arr[slide.index]);
                $('.modal').fadeIn();
            });
            $('.prev').on('click',function(){
                slide.prev();
            });
            $('.next').on('click',function(){
                slide.next();
            });
            $('.close').on('click',function(){
                slide.close();
            })
        },
        prev:function(){
            var _ind = slide.index-=1;
            if(_ind == -1){
                slide.index = slide.arr.length-1;
                _ind = slide.index;
            }
            $('.modal-box').css('background-image',slide.arr[_ind]);
        },
        next:function(){
            var _ind = slide.index+=1;
            if(_ind == slide.arr.length){
                slide.index = 0;
                _ind = slide.index;
            }
            $('.modal-box').css('background-image',slide.arr[_ind]);
        },
        close:function(){
            $('.modal').fadeOut();
        }
    };
    $(function(){
        slide.init();
    });
</script>
<script src="../js/scroll_top.js"></script>
</html>